<div class="modal-container">
  <div class="modal-card">
    <div class="modal-wrapper">
      <div class="title">
        {{ title }}
        <i class="fa fa-times fs-22 pointer cross-icon" aria-hidden="true" *ngIf="isCliInstructions" (click)="denied()">
        </i>
      </div>
      <div class="modal-content" *ngIf="!isCliInstructions">
        <div class="content">
          {{ content }}
        </div>
        <div class="editor-validation-message fs-12" *ngIf="isEditorRequired && isInputMessage">
          {{ editorValidationMessage }}
        </div>
        <div *ngIf="isEditorRequired" class="edit-global-modal">
          <quill-editor [styles]="quillEditorStyle" [(ngModel)]="editorContent"></quill-editor>
        </div>
        <div class="form modal-inputs">
          <div *ngFor="let item of form">
            <app-input
              *ngIf="item['type'] != 'file'"
              [name]="item['name']"
              (input)="validateModalInput($event)"
              [isRequired]="item['isRequired']"
              [label]="item['label']"
              [placeholder]="item['placeholder']"
              [type]="item['type']"
              [icon]="item['icon']"
              [value]="item['value']"
              [attributeOptions]="item['attributeOptions']"
              [message]="inputErrorMessage"
              #formmodal
            ></app-input>
            <app-input
              *ngIf="item['type'] == 'file'"
              [name]="item['name']"
              (change)="validateFileInput($event)"
              [isRequired]="item['isRequired']"
              [label]="item['label']"
              [placeholder]="item['placeholder']"
              [type]="item['type']"
              [icon]="item['icon']"
              [value]="item['value']"
              #formmodal
            ></app-input>
          </div>
          <small class="editor-validation-message">{{ invalidFieldsAsText }}</small
          ><br />
        </div>
      </div>
      <div class="buttons" *ngIf="!isCliInstructions">
        <ul class="inline-list pointer">
          <li>
            <a appClickstop (click)="denied()" class="dark-link pointer">
              <strong class="fw-semibold">{{ deny }}</strong></a
            >
          </li>
          <li>
            <button
              [disabled]="isDisabled"
              appClickstop
              (click)="formValidate()"
              class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn grad-btn-dark fs-14"
            >
              {{ confirm }}
            </button>
          </li>
        </ul>
      </div>
      <div class="row row-lr-margin" *ngIf="isCliInstructions">
        <div class="modal-content" [ngClass]="{ 'content-instructions': isCliInstructions == true }">
          <ol>
            <li class="content">
              Install evalai-cli<br />
              <code #install_evalai>$ pip install evalai{{ cliVersion }}</code>
              <button
                class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
                value="pip install &quot;evalai{{ cliVersion }}&quot;"
                (click)="copyTextToClipboard(install_evalai)"
              >
                <i
                  class="fa fa-clipboard"
                  aria-hidden="true"
                  alt="Copy to
                  clipboard."
                ></i>
              </button>
            </li>
            <li class="content">
              Add your EvalAI account token to evalai-cli<br />
              <code #configure_token>$ evalai set_token {{ authToken }}</code>
              <button
                class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
                (click)="copyTextToClipboard(configure_token)"
              >
                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."> </i>
              </button>
            </li>
            <li class="content">
              Upload challenge phase annotations<br />
              <code #evalai_annotation
                >$ evalai challenge &lt;challenge_id&gt; phase &lt;phase_id&gt; submit --file annotation.json
                --annotation</code
              >
              <button
                class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
                (click)="copyTextToClipboard(evalai_annotation)"
              >
                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."> </i>
              </button>
            </li>
            <li class="content">
              Upload challenge phase annotations > 400MB<br />
              <code #evalai_annotation_large
                >$ evalai challenge &lt;challenge_id&gt; phase &lt;phase_id&gt; submit --file annotation.json --large
                --annotation</code
              >
              <button
                class="btn ev-btn-dark btn-waves-effect waves-dark grad-btn code-btn"
                (click)="copyTextToClipboard(evalai_annotation_large)"
              >
                <i class="fa fa-clipboard" aria-hidden="true" alt="Copy to clipboard."> </i>
              </button>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</div>
